<template>
  <section class="todoapp">
 <!-- 使用 -->
 <TodoHeader @addTask="hAddTask"/>
 <!-- 在父组件中传递给子组件 -->
 <Todomain 
 @changeDone="hChangeDone" 
 @delTask="hDelTask" 
 :list="showList"
 @changeAll="hChangeAll"/>
 <TodoFooter 
 :list="showList"
  @clearDone="hClearDone"
  @changeType="hChangeType"/>
  </section>
</template>

<script>
//引入
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import Todomain from './components/Todomain.vue'
export default {
  //注册
components:{
TodoFooter,
TodoHeader,
Todomain,
},
data(){
  return{
    // list: [
    //     { id: 1, name: '吃饭', isDone: true },
    //     { id: 2, name: '睡觉', isDone: false },
    //     { id: 3, name: '打豆豆', isDone: true }
    //   ],
      list:JSON.parse(localStorage.getItem('list')||'[]'),
       type:'all'
  }
 
},
methods:{
  hDelTask(id){
//3根据id找到数据并删除
const index = this.list.findIndex(item=>item.id === id)
this.list.splice(index,1)
},
hChangeDone(id){
  //3父组件找到对应的元素将isDone取反
const obj =  this.list.find(item=>item.id===id)
//obj指向数组中的对象 所以和数组中的对象是同一个 直接修改 isDone 会修改数组中的数据
obj.isDone = !obj.isDone
},
hAddTask(taskname){
  //添加到list
  this.list.push({
    name:taskname,
     id:Date.now(),
     isDone:false
  })
},
hClearDone(){
  //清楚所有已完成的任务
  //采用过滤思路
  //筛选出所有未完成的数据 覆盖给list即可
  this.list = this.list.filter(item=>!item.isDone)
},
hChangeType(type){
  // console.log(type);
  this.type = type
},
hChangeAll(val){
  //状态设置给每一个元素
  this.list.forEach(item=>item.isDone = val)
}
},
computed:{
  showList(){
      // 在计算属性中, 根据传递过来的 type 来决定返回什么数组
      if(this.type === 'all'){
        return this.list
      }else if (this.type === 'active'){
        // 筛选所有未完成的任务列表返回
        return this.list.filter(item=> !item.isDone)
      }else if (this.type === 'completed'){
      // 筛选所有已完成的任务列表返回
        return this.list.filter(item =>item.isDone)
      }
  }
},
watch:{
  list:{
    deep:true,
    handler(){
     localStorage.setItem('list',JSON.stringify(this.list))
    }
  }
}
}


</script>

<style></style>
